<template>
	<view class="container">
		<view class="forms">
			<view class="game-title">创建角色</view>
			<input type="text" class="game-input-box"  v-model="nickname" placeholder="请输入角色名"/>
			<button  class="create-player-btn" @click="createPlayer">创建</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname : ''
			};
		},
		async onLoad() {
			// let playerData = await this.$request({
			// 	name : 'account',
			// 	method : 'get_player'
			// })
		},
		methods : {
			async createPlayer(){
				if(!this.nickname){
					return uni.showToast({
						title:'请输入角色名',
						icon : 'none'
					})
				}
				
				if(this.nickname.length > 5){
					return uni.showToast({
						title:'角色名不能超过5个字',
						icon : 'none'
					})
				}
				
				//创建角色
				let playerData = await this.$request({
					name : 'player',
					method : 'create_player',
					nickname : this.nickname
				})
	
				uni.reLaunch({
					url:'/pages/loading/loading'
				})
				
				
			}
		}
	}
</script>

<style lang="scss">
	.container{
		width:100vw;
		height:100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.forms{
			width:400px;
			.game-title{
				text-align: center;
				padding-bottom:20px;
				font-size: 24px;
				font-weight: bold;
			}
			.create-player-btn{
				@include game-btn;
				height:40px;
				margin-bottom:10px;
				color:#abb2bf
			}
		}
	}
</style>
